<template>
    <div>
        <el-tabs>
            <el-tab-pane  label="产品信息">
                 <el-form :model="appdetail" label-width="110px" style="overflow:hidden">
                     <el-form-item label="产品名称" prop="appProduct" class="inline__">
                         <el-input v-model="appdetail.appProduct"></el-input>
                     </el-form-item>
                     <el-form-item label="采购数量" prop="appCount" class="inline__">
                         <el-input v-model="appdetail.appCount"></el-input>
                     </el-form-item>
                     <el-form-item label="采购单价" prop="appPrice" class="inline__">
                        <el-input v-model="appdetail.appPrice"></el-input>
                     </el-form-item>
                     <el-form-item label="产品品牌" prop="appUnit" class="inline__">
                         <el-input v-model="appdetail.appUnit"></el-input>
                     </el-form-item>
                     <el-form-item label="产品属性" prop="appStand" class="inline__">
                         <el-input v-model="appdetail.appStand"></el-input>
                     </el-form-item>
                    <el-form-item style="margin-left:130px;">
                        <el-button type="primary" @click="save">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                 </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        name: "add_purchase_product",
        data:function () {
            return{
                //新增申请采购详情表数据
                appdetail:{
                    appProduct:'',
                    appCount:'',
                    appPrice:'',
                    appTotal:0,
                    appUnit:'',
                    appStand:'',
                    proDetailId:0
                }
            }
        },
        methods:{
            //保存产品
            save(){
                if(this.appdetail.appPrice!=null&&this.appdetail.appCount!=null){
                    this.appdetail.appTotal=this.appdetail.appCount*this.appdetail.appPrice;
                }
                this.$store.dispatch("setVueDetailProduct",this);
                this.$store.state.vueDetail.appDetailList.push(this.appdetail);
                this.$store.state.vueDetail.new_detail_activeVisitable = false;
                this.cleanAppdetail();
            },
            //取消新增
            cancel(){
                this.$store.state.vueDetail.new_detail_activeVisitable = false;
                this.cleanAppdetail();
            },
            //清空申请采购详情表数据
            cleanAppdetail(){
                this.appdetail = {
                    appProduct:'',
                    appCount:'',
                    appPrice:'',
                    appTotal:0,
                    appUnit:'',
                    appStand:'',
                    proDetailId:0
                }
            }
        },
        created() {
        }
    }
</script>
<style>
    .inline__{width:90%!important;display:inline-block}
</style>